import React from 'react';
import { List } from 'react-virtualized';

// 用于长列表渲染的数组
const list = [
  'Brian Vaughn',
  ...new Array(100).keys()
  // And so on...
];


// Render your list
class ReactList extends React.Component {
  // 行渲染函数 - 被 List 组件重复调用
  rowRenderer = ({ key, index, isScrolling, isVisible, style, }) => {
    // 类似于之前列表渲染的 map 返回的 JSX
    return (
      // key 插件自动生成的 key
      // style 插件自动生成的 行内样式
      <div key={key} style={style}>
        {/* list[index] 相当于之前 map 时候的 item */}
        ---{list[index]}---
      </div>
    );
  };
  // 计算一行高度的函数
  rowHeight = ({ index }) => {
    return 40 * index;
  };
  render() {
    return (
      // 核心组件
      <List
        // 宽度 - Number
        width={window.screen.width}
        // 高度 - Number
        height={window.screen.height}
        // 行数 - Number
        rowCount={list.length}
        // 行高度  - Number / Function 
        rowHeight={this.rowHeight}
        // 行渲染 - Function - 负责呈现一行
        rowRenderer={this.rowRenderer}
      />
    );
  }
}

export default ReactList;